/**
* Created by ren on 2017/1/6.
*/
<template>
  <div class='redpackList' style="padding-top: 20px">
    <template v-if="_parentThis.redPackChild==='parent'">
      <template v-if="goodsData!==''&&goodsData.content.length>0">
        <div style="height: 130px;padding: 20px 0;background:#f5f5f5;margin: 0 23px 10px 10px;"
             v-for="(item,index) in goodsData.content">
          <img src="../../assets/redpack-img.png"
               style="width: 90px;height: 90px;float: left;margin-right: 20px;margin-left: 35px">
          <div style="float:left;margin-right: 20px;margin-top: 10px">
            <div style="font-size: 18px;margin-bottom: 10px" v-if="item.type===0">消费</div>
            <div style="font-size: 18px;margin-bottom: 10px" v-if="item.type===1">分享</div>
            <div style="font-size: 16px;color: #666666" v-if="item.source===1">金生金存放黄金</div>
            <div style="font-size: 16px;color: #666666" v-if="item.source===2">黄金商城</div>
            <div style="font-size: 16px;color: #666666" v-if="item.source===3">定投黄金</div>
          </div>
          <div style="float:right;font-size: 18px;color: #f05120;margin-top: 20px;margin-right: 30px">
            {{item.goldBeanNumber}}个金蛋
          </div>
        </div>
        <div class="paging-wrap" v-if="goodsData.totalPages>1">
          <div class="paging" v-if="goodsData" style="float:right;margin-right: 23px">
            <img src="../../assets/prev.png" style="float: left;margin-top: 23px;cursor: pointer" @click="prev">
            <div class="page" style="float: left">
              <div v-for="(item,index) in goodsData.totalPages" v-if="goodsData.totalPages<9"
                   :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
              </div>
              <template v-if="goodsData.totalPages>8">
                <template v-if="goodsData.totalPages-9<nextPage">
                  <div v-for="(item,index) in goodsData.totalPages" v-if="index>goodsData.totalPages-9"
                       :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
                  </div>
                </template>
                <template v-else>
                  <div v-for="(item,index) in goodsData.totalPages" v-if="index<5+nextPage&&index>nextPage-1"
                       :class="{active:index===nextPage}"
                       @click="paging(index)">{{index+1}}
                  </div>
                  <div>……</div>
                  <div v-for="(item,index) in goodsData.totalPages" v-if="index>goodsData.totalPages-3"
                       :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
                  </div>
                </template>
              </template>
            </div>
            <img src="../../assets/next.png" style="float: left;margin-top: 23px;cursor: pointer" @click="next">
            <div class="total">共{{goodsData.totalPages}}页</div>
          </div>
        </div>
      </template>
      <div v-else style="text-align: center;padding-top: 204px">
        <img src="../../assets/null.png" style="margin-bottom: 40px">
        <div>暂时没有红包哦，快去首页看看吧~</div>
      </div>
    </template>
    <template v-if="_parentThis.redPackChild==='aboutRedPack'">
      <AboutRedPack></AboutRedPack>
    </template>
    <div style="margin-top: 10px;position: absolute;top: 36px;right: 15px;font-size: 18px"
         v-if="_parentThis.redPackChild==='parent'">
      <span style="float:right;color:#e6760a;cursor: pointer" @click="cut('aboutRedPack')">查看红包说明？</span>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import API from '../../api'
  import Notify from '../Notify'
  import AboutRedPack from './AboutRedPack'
  export default {
    name: 'redpackList',
    components: {
      Notify,
      AboutRedPack
    },
    props: ['_parentThis'],
    data: function () {
      return {
        notifyStatus: 2,
        nextPage: 0,
        goodsData: ''
      }
    },
    methods: {
      cut: function (name) {
        this._parentThis.redPackChild = name
        switch (name) {
          case 'parent':
            this._parentThis.titHtml = '<span>我的红包</span>'
            break
          case 'aboutRedPack':
            this._parentThis.titHtml = '<span>我的红包 > <span style="color: #f48315;">关于红包</span></span>'
            break
        }
      },
      MyredvelopeVo: function () {
        this.$http.post(API.MyredvelopeVo, {
          userId: this.$cookie.get('id'),
          nextPage: this.nextPage,
          pageSize: 10
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.goodsData = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    mounted: function () {
      this._parentThis.cutName = 'redpack'
      this._parentThis.titHtml = '<span>我的红包</span>'
      this.MyredvelopeVo()
    }
  }
</script>
